<template>
  <!-- 该组件是选择并合成房屋查询条件组件 -->
  <div class="seek-house">
    <van-dropdown-menu active-color="#21b97a">
      <!-- 区域 -->
      <Area @updateConditionFondHouse="updateConditionFondHouseFn"></Area>
      <!-- 方式 -->
      <Mode @updateConditionFondHouse="updateConditionFondHouseFn"></Mode>
      <!-- 价格 -->
      <Price @updateConditionFondHouse="updateConditionFondHouseFn"></Price>
      <!-- 筛选 -->
      <Filterr @updateConditionFondHouse="updateConditionFondHouseFn"></Filterr>
    </van-dropdown-menu>
  </div>
</template>

<script>
// 引入组件
import Area from '@/views/home/views/Area'
import Mode from '@/views/home/views/Mode'
import Price from '@/views/home/views/Price'
import Filterr from '@/views/home/views/Filterr'

export default {
  name: 'SeekHouse',
  components: { Area, Mode, Price, Filterr },
  props: {},
  data() {
    return {
      newfilterCondition: []
    }
  },
  computed: {},
  watch: {},
  created() {},
  methods: {
    // 当四个子组件选择好查询条件以后，调用此函数重新请求后台数据并更新页面
    updateConditionFondHouseFn(newArr) {
      // console.log(arr)
      // this.newfilterCondition = arr
      this.$emit('updateQueryParams', newArr)
    }
  }
}
</script>

<style scoped lang="less">
.seek-house {
  :deep(.picker-item) {
    height: 650px;
  }
  position: relative;
  :deep(.van-dropdown-menu__title) {
    font-size: 34px;
  }
  :deep(.van-picker__toolbar) {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 2;
    height: 100px;
    border-top: 1px solid #e9e9e9;
  }
  :deep(.van-picker__cancel) {
    width: 255px;
    font-size: 36px;
    color: #21b97a;
  }
  :deep(.van-picker__confirm) {
    width: 500px;
    font-size: 36px;
    color: #fff;
    background-color: #21b97a;
  }
}
</style>
